<template>
  <div class="main">
    <div class="header">
      <p class="header-title">小浪蹄</p>
      <button class="header-display">预览</button>
    </div>
    <div class="material">
      <p>选择</p>
      <div
        class="material-item"
        v-for="(item, index) in arrayMaterial"
        :key="index"
      >
        <p>{{ item.label }}</p>
        <div
          :style="{ width: item.w + 'px', height: item.h + 'px' }"
          @mouseenter="onCopyMaterial(index, $event)"
        >
          <component :is="item.compName" />
        </div>
      </div>
    </div>
    <div class="edit" id="edit">
      <div class="edit-item" v-for="(item, index) in arrayEdit" :key="index">
        <vue-draggable-resizable
          :w="item.w"
          :h="item.h"
          :x="item.x"
          :y="item.y"
          :z="item.z"
          :parent="false"
          :class-name="`edit-draggable edit-idx${index}`"
          class-name-active="edit-item-active"
          @activated="onActivated(index)"
          @dragging="onDrag"
          @resizing="onResize"
        >
          <component :is="item.compName" />
          <i class="edit-item-close" @click="onRemoveEditItem(index)">x</i>
        </vue-draggable-resizable>
      </div>
      <p>拖到我这里!</p>
    </div>
    <div class="attrs">
      <p>属性区域</p>
      <p>宽度：<input class="attrs-input" v-model="attrsW" /></p>
      <p>高度：<input class="attrs-input" v-model="attrsH" /></p>
      <p>x：<input class="attrs-input" v-model="attrsX" /></p>
      <p>y：<input class="attrs-input" v-model="attrsY" /></p>
      <p>z：<input class="attrs-input" v-model="attrsZ" /></p>
      <button @click="onSaveAttr">保存</button>
    </div>
    <div class="display" v-if="isdisplay"></div>
  </div>
</template>

<script>
import NorlmalBtn from "../lowcodes/NorlmalBtn.vue";
import FormInput from "../lowcodes/FormInput.vue";
import NorlmalImg from "../lowcodes/NorlmalImg.vue";
export default {
  components: {
    NorlmalBtn,
    FormInput,
    NorlmalImg,
  },
  data: function () {
    return {
      // 选择
      arrayMaterial: [
        {
          compName: "NorlmalBtn",
          label: "通用-按钮",
          w: 100,
          h: 30,
          z: 2,
        },
        {
          compName: "FormInput",
          label: "表单-输入框",
          w: 200,
          h: 30,
          z: 2,
        },
        {
          compName: "NorlmalImg",
          label: "通用-图片",
          w: 100,
          h: 100,
          z: 2,
        },
      ],
      // 编辑
      arrayEdit: [
        // compName,
        // label,
        // w,
        // h,
        // x,
        // y,
        // z,
      ],
      activatedIndexEdit: -1,
      // 属性
      attrsW: "",
      attrsH: "",
      attrsX: "",
      attrsY: "",
      attrsZ: "",
      // 预览
      isdisplay: false,
    };
  },
  methods: {
    onActivated: function (index) {
      // console.log(index);
      this.activatedIndexEdit = index;
      this.attrsW = this.arrayEdit[this.activatedIndexEdit].w;
      this.attrsH = this.arrayEdit[this.activatedIndexEdit].h;
      this.attrsX = this.arrayEdit[this.activatedIndexEdit].x;
      this.attrsY = this.arrayEdit[this.activatedIndexEdit].y;
      this.attrsZ = this.arrayEdit[this.activatedIndexEdit].z;
    },
    onResize: function (x, y, width, height) {
      // console.log(x, y, width, height);
      this.$set(this.arrayEdit, this.activatedIndexEdit, {
        ...this.arrayEdit[this.activatedIndexEdit],
        w: width,
        h: height,
        x,
        y,
      });
      this.attrsW = this.arrayEdit[this.activatedIndexEdit].w;
      this.attrsH = this.arrayEdit[this.activatedIndexEdit].h;
      this.attrsX = this.arrayEdit[this.activatedIndexEdit].x;
      this.attrsY = this.arrayEdit[this.activatedIndexEdit].y;
    },
    onDrag: function (x, y) {
      // console.log(x, y);
      this.$set(this.arrayEdit, this.activatedIndexEdit, {
        ...this.arrayEdit[this.activatedIndexEdit],
        x,
        y,
      });
      this.attrsX = this.arrayEdit[this.activatedIndexEdit].x;
      this.attrsY = this.arrayEdit[this.activatedIndexEdit].y;
    },
    onCopyMaterial(index, event) {
      // console.log(index, this.arrayMaterial[index], event);
      const materialRect = event.target.getBoundingClientRect();
      const editlRect = document.getElementById("edit").getBoundingClientRect();
      const propEdit = {
        compName: this.arrayMaterial[index].compName,
        label: this.arrayMaterial[index].label,
        w: this.arrayMaterial[index].w,
        h: this.arrayMaterial[index].h,
        x: materialRect.left - editlRect.left,
        y: materialRect.top - editlRect.top,
        z: this.arrayMaterial[index].z,
      };
      // console.log(propEdit);
      const tmp = this.arrayEdit;
      tmp.push(propEdit);
      this.arrayEdit = tmp;
    },
    onRemoveEditItem(index) {
      const tmp = this.arrayEdit;
      tmp.splice(index, 1);
      this.arrayEdit = tmp;
    },
    onSaveAttr() {
      this.$set(this.arrayEdit, this.activatedIndexEdit, {
        ...this.arrayEdit[this.activatedIndexEdit],
        w: Number(this.attrsW),
        h: Number(this.attrsH),
        x: Number(this.attrsX),
        y: Number(this.attrsY),
        z: Number(this.attrsZ),
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  position: relative;
  width: 100%;
}
.header {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 25px;
  background: yellow;
}
.material {
  position: absolute;
  left: 0px;
  top: 30px;
  width: 300px;
  height: 720px;
  background: #ffa;
}
.material-item {
  margin: 20px 0 20px 20px;
}
.edit {
  position: absolute;
  left: 300px;
  top: 30px;
  width: 375px;
  height: 720px;
  background: #ccc;
}
.edit-item {
  width: 0px;
  height: 0px;
  position: relative;
}
.edit-draggable {
  position: relative;
}
.edit-item-active {
  z-index: 99999999999 !important;
}
.edit-item-close {
  height: 30px;
  line-height: 30px;
}
.attrs {
  position: absolute;
  left: 675px;
  top: 30px;
  width: 200px;
  height: 720px;
  background: red;
}
.attrs-input {
  width: 100px;
}
.display {
}
</style>
